<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
import {POST} from "../../../api/index.js";
import {notify} from "../../../utils/commonScript.js";

const router = useRouter()
const qhType = ref('113')
const tableList = ref([])
const typeList = ref([
  {
    type: '113',
    names: ['氧化铝', '沥青', '纸浆', '沪镍', '燃油', '沪铅', '沪铜', '沪金', '沪银', '沪铝',
    '丁二烯胶', '不锈钢', '橡胶', '沪锌', '沪锡', '热卷', '线材', '螺纹钢']
  },
  {
    type: '115',
    names: ['玻璃', '尿素', '白糖', '纯碱']
  }
])

onMounted(() => {
  getData()
})

const getData = () => {
  axios.get(`https://futsseapi.eastmoney.com/list/${qhType.value}?` +
      'callback=aaa_callback&orderBy=zdf&sort=desc&pageSize=2000&pageIndex=0&callbackName=aaa_callback&token=58b2fa8f54638b60b87d69b31969089c&' +
      'field=dm%2Csc%2Cname%2Cp%2Czsjd%2Czde%2Czdf%2Cf152%2Co%2Ch%2Cl%2Czjsj%2Cvol%2Ccje%2Cwp%2Cnp%2Cccl&blockName=callback&_=1725355089653').then(res => {

    const str = res.data.replace('aaa_callback(', '').replace(')', '');
    let data = JSON.parse(str)
    console.log(data.list.map(item => item.name).sort())
    console.log(data.list)
    tableList.value = []
    data.list.forEach(item => {
      if(item.name.indexOf('主') !== -1 && item.name.indexOf('次') === -1 ){
        let code = item.dm.split('').slice(0, item.dm.length -1).join('')
        // item.dm = code
        let title = item.name.replace('主连', '')

        tableList.value.push({
          title,
          list: data.list.filter(e => e.dm.startsWith(code) && e.name.indexOf(title) !== -1 && e.name.indexOf('次') === -1)
        })

      }
    })
    // typeList.value.forEach(item => {
    //   if(item.type === qhType.value) {
    //     item.names.forEach(items => {
    //       tableList.value.push({
    //         title: items,
    //         list: data.list.filter(e => e.name.indexOf(items) !== -1)
    //       })
    //     })
    //   }
    // })


  }).catch((err)=> {
    console.log(err)
  })
}

const goHandle = (item) => {
  window.open(`/#/stock-detail?stockCode=${item.dm}&stockName=${item.name}&type=1`)
}

const rcHandle = (row) => {
  console.log(row)
  POST('/futures/variety', {
    code: row.dm,
    name: row.name,
    exchangeCode: row.sc,
    price: row.p.toString().replace('-', ''),
    ratio: row.zdf.toString().replace('-', '')
  }).then(res => {
    notify('关注成功','success')
  })
}

</script>

<template>
<div class="top">
  <el-radio-group v-model="qhType" size="large" @change="getData">
    <el-radio-button label="上期所" value="113" />
    <el-radio-button label="大商所" value="114" />
    <el-radio-button label="郑商所" value="115" />
    <el-radio-button label="广商所" value="225" />
    <el-radio-button label="上期所能源" value="142" />
  </el-radio-group>
</div>
  <div class="bottom">
    <template v-for="item in tableList">
      <div>
        <p class="title">{{item.title}}</p>
        <template v-for="items in item.list">
          <div :class="['item', {'primary-bg': items.name.indexOf('主连') !== -1 && items.name.indexOf('次') === -1}]" @click="goHandle(items)">
            <p><span>{{items.name}}</span><span class="gz" @click.stop="rcHandle(items)">关注</span></p>
            <p :class="[{'success': items.zdf < 0}, {'error': items.zdf > 0}]">
              <span>{{items.p}}</span>
              <span>{{items.zdf}}%</span>
            </p>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.gz{
  font-size: 12px;
  cursor: pointer;
  color: #409EFF;
}
.bottom{
  .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 20px;
  }
  .item{
    display: inline-block;
    width: 150px;
    background: #FFFFFF;
    border-radius: 10px;
    margin: 10px 10px 10px 0;
    padding: 10px 10px 0;
    p{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    &.primary-bg{
      background: #409EFF;
      color: #FFFFFF;
      p{
        color: #FFFFFF!important;
      }
      .gz{
        color: #FFFFFF;
      }
    }
  }
}
</style>